<template>
  <view>
    <!-- #ifdef H5 -->
    <van-nav-bar title="订单"></van-nav-bar>
    <!-- #endif -->
    <!-- tabs -->
    <view class="tabs-wrap1">
      <view class="tab" :class="{ 'tab-active': data.tabActive === 1 }" @tap="tapTabs(1)">
        充电订单
      </view>
      <view class="tab" :class="{ 'tab-active': data.tabActive === 2 }" @tap="tapTabs(2)">
        超时占用订单
      </view>
    </view>
    <Tabs
      v-if="data.tabActive === 1"
      ref="tabViewRef"
      :type="2"
      :tabs="data.tabs"
      :selectInx="data.selectInx"
      @set-select="setSelect"
      bg="#F2F2F2"></Tabs>
    <HistoryList v-if="data.tabActive === 1 && data.selectInx === 'history'"></HistoryList>
    <PendingList v-if="data.tabActive === 1 && data.selectInx === 'pending'"></PendingList>
    <RealList v-if="data.tabActive === 1 && data.selectInx === 'real'"></RealList>
    <UnpayList v-if="data.tabActive === 1 && data.selectInx === 'unpay'"></UnpayList>
    <Tabs
      v-if="data.tabActive === 2"
      ref="tabViewRef1"
      :type="2"
      :tabs="data.tabs1"
      :selectInx="data.selectInx1"
      @set-select="setSelect1"
      bg="#F2F2F2"></Tabs>
    <OccupyHistoryList
      v-if="data.tabActive === 2 && data.selectInx1 === 'history'"></OccupyHistoryList>
    <OccupyRealList v-if="data.tabActive === 2 && data.selectInx1 === 'real'"></OccupyRealList>
    <Tabber ref="tabber" :select="3"></Tabber>
  </view>
</template>

<script lang="ts" setup>
import Tabber from '@/components/tabber/tabber.vue';
import Tabs from '@/components/tabs/tabs.vue';
import HistoryList from './historyList.vue';
import PendingList from './pendingList.vue';
import RealList from './realList.vue';
import UnpayList from './unpayList.vue';
import OccupyHistoryList from './occupyHistoryList.vue';
import OccupyRealList from './occupyRealList.vue';
import { getOrderObj, setOrderObj, setToastInstance, systemInfo } from '@mixins/info';
// #ifdef MP-WEIXIN
import { useToast } from '@/components/wxToast';
setToastInstance(useToast());
// #endif

// 分享
onShareAppMessage(() => {
  return {
    title: '',
    path: '/pages/stationMap/stationMap',
  };
});

const appType = import.meta.env.VITE_VUE_APP_TYPE;

const tabViewRef = ref();
const tabViewRef1 = ref();

const data = reactive({
  tabActive: 1,
  selectInx: 'history',
  selectInx1: 'history',
  tabs: [
    {
      id: 'history',
      name: '历史订单',
    },
    {
      id: 'pending',
      name: '异常订单',
    },
    {
      id: 'real',
      name: '实时订单',
    },
    {
      id: 'unpay',
      name: '待支付',
    },
  ],
  tabs1: [
    {
      id: 'history',
      name: '历史订单',
    },
    {
      id: 'real',
      name: '实时订单',
    },
  ],
});

const tapTabs = (inx: number) => {
  data.tabActive = inx;
};

const setSelect = (id: any) => {
  data.selectInx = id;
};
const setSelect1 = (id: any) => {
  data.selectInx1 = id;
};

onShow(() => {
  uni.$off('pageType');
  uni.$once('pageType', res => {
    if (res) {
      data.tabActive = 1;
      data.selectInx = res;
      nextTick(() => {
        tabViewRef?.value?.setSelect(res);
      });
    }
  });
  const obj: any = getOrderObj();
  if (obj) {
    setOrderObj(null);
    data.tabActive = 1;
    data.selectInx = obj.pageType;
    nextTick(() => {
      tabViewRef?.value?.setSelect(obj.pageType);
    });
    // if (obj.pageId) {
    //   if (obj.pageType === 'unpay') {
    //     uni.navigateTo({
    //       url: `/pages/orderDetails/unpayDetails?id=${obj.pageId}`,
    //     });
    //   } else if (obj.pageType === 'history') {
    //     uni.navigateTo({
    //       url: `/pages/orderDetails/historyDetails?id=${obj.pageId}`,
    //     });
    //   }
    // }
  }
});

onUnload(() => {
  uni.$off('pageType');
});
// #ifdef H5
setTimeout(() => {
  const navBarEle = document.querySelector('.van-nav-bar') as HTMLElement;
  navBarEle.style.paddingTop = `${systemInfo.statusBarHeight}px`;
});
// #endif
</script>

<style lang="scss">
@import '@/components/tabs/tabs.scss';
</style>